﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order_Order" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Layout</title>
        <link rel="stylesheet" href="../Styles/jquery.mobile-1.0.1.css" />
	    <link rel="stylesheet" href="../Styles/jqm-docs.css" />
	    
        <script type="text/javascript" src="../Scripts/jquery.js"></script>
	    <script type="text/javascript" src="../Scripts/jquery.mobile-1.0.1.min.js"></script>

	    <script type="text/javascript" src="../Scripts/jquery.mobile.themeswitcher.js"></script>
	    <script type="text/javascript" src="../Scripts/jqm-docs.js"></script>
    

        <script type="text/javascript">



        </script>

        

</head>
<body>
    <form id="form1" method="post" action="PostData.aspx">
    <div data-role="page" id="MainPage">


    <script type="text/javascript">


        var listID = [];

        function removeFormField(id) {

            //$(id).remove();
            /*$(id).animate({ 
            color: 'red', speed: 1000, complete: function () { $(id).remove(); }
            });*/
            //color: 'red', opacity: 0.5
            $(id).animate(
                {
                    left: 50, opacity: 0.1
                    //height: "toggle", opacity: 0.9
                }, "slow",
                function () {

                    $(id).remove();
                    var index = $.inArray(id.substring(id.indexOf("_") + 1), listID);
                    listID.splice(index, 1);

                });

        }
        //$(document).ready(function () { // When the document is ready

        $('#MainPage').live('pageinit', function (event) {


            $('form').submit(function () {
                //alert($(this).serializeArray().slice());
                //$(this).removeData();

                /*var postData = {
                name: "Joanna",
                hair: "Brunette",
                age: 35,
                favoriteMovies: [
                "Terminator 2",
                "The Notebook",
                "Teenwolf"
                ]
                };



                var ajaxResponse = $.ajax({
                type: "post",
                url: "PostData.aspx",
                contentType: "application/json",
                data: JSON.stringify(postData)
                })

                // When the response comes back, output the HTML.
                ajaxResponse.then(
                function (apiResponse) {

                // Dump HTML to page for debugging.
                $("#response").html(apiResponse);

                }
                );
                alert(ajaxResponse);*/
            });

            $('#myFormReset').click(function () {
                listID = [];
                $('#div1').replaceWith("<div id='div1' class='ui-grid-a' style='border-width:2px;'></div>");
            });

            // when any Href is clicked
            $('a').click(function () {

                /*alert($(this).attr('id'));    // Gives ID
                alert($(this).data('id'));      // Gives Data
                alert($(this).attr('data-id')); // Give Data  */

                //alert("The ITEM Name ID : " + $(this).attr('data-id') + "-->" + $.inArray($(this).attr('id'), listID));


                if ($.inArray($(this).attr('id'), listID) > -1) {
                    var idIF = "#Q_" + $(this).attr('id');
                    $(idIF).val(parseInt($(idIF).val()) + 1);
                } else if ($(this).attr('id') > 0) {

                    listID.push($(this).attr('id'));    // Store the item ID so that you dont add again

                    $('#div1').append("<div id='IT_" + $(this).attr('id') + "' ><div class='ui-bar ui-bar-e' style='border-color:Black;'>" +
$(this).data('id')
+ "<a href='#' onClick='removeFormField(\"#IT_" + $(this).attr('id') + "\")' data-role='button' data-icon='delete' data-iconpos='notext' data-theme='b'>Remove</a>" +
"<input type='text' style='width:20px;' maxlength='2' name='Q_" + $(this).attr('id') + "' id='Q_" + $(this).attr('id') + "' value='1' />" +
"<input type='hidden' name='Q_" + $(this).attr('id') + "' value='" + $(this).attr('price-id') + "'/></div></div>").trigger("create");

                }


                // gets the content of "#div1", with html(), and text()
                /*var dv_html = $('#div1').html();
                var dv_text = $('#div1').text();

                // displays the values in an alert window
                alert('html - ' + dv_html + '\n text - ' + dv_text);

                // modify the content in "#div1" and "#div2"
                $('#div1').html('New content, changed with <u>html()</u>');
                $('#div2').text('New content, modified with <u>text()</u>');*/

                /*$('#div1').append('<div data-role="fieldcontain" class="ui-hide-label">' +
                '<label for="name" class="ui-hidden-accessible">Name:</label>' +
                '<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
                '</div>'); */


                //$('#div1').append("<input type='hidden' name=" + $(this).attr('id') + " value=" + $(this).attr('data-id') + "/>");

                /*$('#div1').append("<input type='checkbox' checked='checked' onClick='removeFormField(" + $(this).attr('id')  + ")' name=" + $(this).attr('id') + " id=" + $(this).attr('id') + " class='custom' />" +
                "<label for=" + $(this).attr('data-id') + ">" + $(this).attr('data-id') + "</label> <p id='add_field'><a href='#' onClick='removeFormField(" + $(this).attr('id') + ")'><span>&raquo; Add your favourite links.....</span></a></p>");
                */

            });

        });

    </script>

        <div data-role="header">
        <h1>
                The Layout</h1>
                 <a href="../Default.aspx" id="BACK" data-role="button" data-icon="arrow-l" data-theme="b">Back Home</a>
        </div>
        <div data-role="content" data-theme="c">
            <div class="content-secondary">

                <div id="div1" class="ui-grid-b" style="border-width:2px;">
                    

                </div>

                <fieldset class="ui-grid-a">
                    <div class="ui-block-a">
                    <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
                        <%--<input type="button" id="myFormSubmit" value="Submit" data-theme="b" data-mini="true"/>--%>
                    </div>
                    <div class="ui-block-b">
                        <input type="reset" id="myFormReset" value="Reset" data-theme="c" />
                    </div>
                </fieldset>

            </div>
            <div class="content-primary">
            <%--<input type="hidden" name="AAAA" value="TWOWWWWWWWWW"/>--%>
                <asp:Label runat="server" ID="HelloWorldLabel"></asp:Label>
                <br />
                <br />
                <br />
                <ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
                    <asp:Repeater ID="rpt1" runat="server">
                        <ItemTemplate>
                            <li data-filtertext='<%#DataBinder.Eval(Container.DataItem, "item_name")%>'>
                            <a href="" id='<%#DataBinder.Eval(Container.DataItem, "item_id")%>' data-id='<%#DataBinder.Eval(Container.DataItem, "item_name")%>' price-id='<%#DataBinder.Eval(Container.DataItem, "item_price")%>'>
                                <%#DataBinder.Eval(Container.DataItem, "item_name")%></a>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>

        <div data-role="footer">
        </div>

    </div>
    </form>
</body>
</html>
